<template>
  <div id="login-page">
    <div class="page-title page-title-white" :style="{
      top:(this.getSafeArea().top-4)+'px'
    }">
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>可可商城登录</span>
    </div>
    <div id="logo" align="center">
      <img src="/static/logo.png" style="width: 50%;" alt="">
    </div>
    <div id="change-button">
      <div class="item">
        <a href="javascript:void(0)" class="curr">密码</a>
      </div>
      <div class="item">
        <a href="javascript:void(0)" @click="$router.push('/LoginSms')">手机号</a>
      </div>
    </div>
    <el-form class="form login-form able-select" label-width="100px" :model="form" :rules="rules" ref="ruleForm" size="medium">
      <el-form-item label="手机号" prop="username">
        <el-col :span="20">
          <el-input
            placeholder="请输入 手机号"
            v-model.number="form.username"
            @keyup.enter.native="submit"
            :maxlength="11"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-col :span="20">
          <el-input
            class="able-select"
            type="password"
            placeholder="请输入密码"
            v-model="form.password"
            :maxlength="30"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label-width="0px" align="center">
        <el-button type="danger" id="login-submit-button" @click="preSubmit" :loading="isLoading" :disabled="!isAgree">
          登录
        </el-button>
        <div>
          <my-privacy-agreement :callback="setIsAgree"/>
        </div>
        <div id="login-submit-button-bottom-box">
          <div class="left">
            <a href="javascript:void(0)" @click="$router.push('/Register')">前去注册</a>
          </div>
          <div class="right">
            <a href="javascript:void(0)" @click="$router.push('/ResetPassword')">忘记密码?</a>
          </div>
        </div>
        <!--        <el-button type="success" @click="$router.push('/Register')">无账号，前去注册</el-button>-->
      </el-form-item>
    </el-form>


    <third-user-login-box/>

    <div style="position: absolute; bottom: 25px; text-align: right; width: 98%; padding-right: 5px;">
      <!--      <el-button type="info" icon="el-icon-user" @click="$router.push('/')">继续游客访问</el-button>-->
    </div>
  </div>
</template>

<script>
import MyPrivacyAgreement from '../common/MyPrivacyAgreement'
import ThirdUserLoginBox from '../common/ThirdUserLoginBox'
import AesUtils from '../tools/AesUtils'

export default {
  name: 'Login',
  components: {ThirdUserLoginBox, MyPrivacyAgreement},
  mounted: function () {

    if (typeof this.CurrUser.IsLogin === 'function' && this.CurrUser.IsLogin()) {
      this.$router.push('/')
    }
    // 非开发环境,清除数据
    // if (process.env.NODE_ENV === 'development') {
    //
    // }
    this.form.username = '15200000003'
    this.form.password = 'a123456'


    let $this = this
    $this.bus.$on('MyPrivacyAgreementCallBus', function () {
      if (localStorage.getItem('MyPrivacyAgreement') === '1') {
        $this.isAgree = true
      } else {
        $this.isAgree = false
      }
      $this.$forceUpdate()
    })
  },
  destroyed () {
    this.bus.$off('MyPrivacyAgreementCallBus')
  },
  data: function () {
    return {
      isAgree: false,
      isLoading: false,
      form: {
        username: '',
        password: '',
      },
      verifyImgSrc: '',
      currVerifyImgSrc: this.ApiDoNameAuth + 'Verify/createImage?eventType=login&deviceId=' + this.GetDeviceID(),
      rules: {
        username: [
          {validator: this.checkMobile, trigger: ['blur','change']},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: ['blur','change']},
          {min: 6,max:30, message: '密码长度在 6~30 之间', trigger: ['blur','change']}
        ],
      }
    }
  },
  methods: {
    setIsAgree: function (isAgree) {
      this.isAgree = isAgree
      this.$forceUpdate()
    },
    preSubmit: function () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.bus.$emit('MySliderCaptchaCallBus', 'Login', (sliderX) => {
            this.submit(sliderX)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 提交
    submit: function (sliderX) {
      this.isLoading = true
      const form = {
        sliderX,
        username: this.form.username,
        password: this.form.password,
        from: 'MemberH5',
      }
      let data = JSON.stringify(form)
      data = AesUtils.Encrypt(data)
      this.MyRequest(this.ApiDoNameAuth + 'Public/r7wqyztzenb5k2k1', {data}, (data) => {
        // this.isLoading = false
        data.username = this.form.username
        this.CurrUser.setCache(data)
        this.bus.$emit('UserInfoBusCall')
        location.reload()
      }, () => {
        this.$message.success('操作失败，请重试')
        this.isLoading = false
        this.$forceUpdate()
      })
    },

    // 重置表单
    resetForm () {
      this.$refs.ruleForm.resetFields()
    },
    register: function () {
      // this.$alert('请联系向: 623862474@qq.com 发送邮件进行注册。')
    }
  }
}
</script>

<style scoped>

</style>
